<template>
	<view class="container">
		<tui-card :image="card[0].img" :title="card[0].title" :tag="card[0].tag" @click="detail(0)">
			<template v-slot:body>
				<view class="tui-article">
					<image src="https://www.thorui.cn/extend/welfare/img_star_banner.png" mode="widthFix" class="tui-welfare__img"></image>
					<view class="tui-common tui-welfare__title">点star获取签到模板</view>
					<view class="tui-common tui-welfare__desc">前往GitHub点star可免费获得签到模板，福利未过期之前所有用户均可参加。</view>
				</view>
			</template>
		</tui-card>
		<view class="tui-mtop">
			<tui-card :image="card[1].img" :title="card[1].title" :tag="card[1].tag" @click="detail(1)">
				<template v-slot:body>
					<view class="tui-article">
						<image src="https://www.thorui.cn/extend/welfare/img_member_banner.png" mode="widthFix" class="tui-welfare__img"></image>
						<view class="tui-common tui-welfare__title">付费模板9折购</view>
						<view class="tui-common tui-welfare__desc">所有付费模板可9折购买，福利未过期之前所有会员均可参加。</view>
					</view>
				</template>
			</tui-card>
		</view>

		<tui-bottom-popup :show="show" @close="close">
			<view style="min-height: 760rpx;">
				<tui-list-cell :hover="false" padding="0" :lineLeft="false">
					<view class="tui-desc__title thorui-flex__between">
						<view>福利专享</view>
						<tui-icon name="shut" :size="22" @click="close"></tui-icon>
					</view>
				</tui-list-cell>
				<view class="tui-common" v-if="index === 0">
					<view class="thorui-article__h2">点star获取签到模板</view>
					<view class="thorui-article__h3">获取步骤如下：</view>
					<view class="thorui-article__p">
						1）去GitHub给ThorUI项目点star，项目分别为：
						<tui-copy-text value="ThorUI" copyValue="https://github.com/dingyong0214/ThorUI" color="#586c94"></tui-copy-text>
						与
						<tui-copy-text value="ThorUI-uniapp" copyValue="https://github.com/dingyong0214/ThorUI-uniapp" color="#586c94"></tui-copy-text>
						；
					</view>
					<view class="thorui-article__p">
						2）加
						<tui-copy-text value="QQ3039218619" copyValue="3039218619" color="#586c94"></tui-copy-text>
						，截图发送到该QQ即可获取源码。
					</view>
					<view class="tui-tips">长按项目名称与QQ即可复制项目地址和QQ号！</view>
				</view>
				<view v-if="index === 1" class="tui-common">
					<view class="thorui-article__h2">付费模板9折购</view>
					<view class="thorui-article__h3">获取步骤如下：</view>
					<view class="thorui-article__p">1）开通VIP，成为ThorUI会员；</view>
					<view class="thorui-article__p">
						2）加QQ
						<tui-copy-text value="3039218619" color="#586c94"></tui-copy-text>
						或
						<tui-copy-text value="3168647172" color="#586c94"></tui-copy-text>
						咨询购买。
					</view>
					<view class="tui-tips">长按QQ即可复制QQ号！</view>
				</view>
				<view class="tui-btn__box">
					<tui-button :type="index == 0 ? 'gray-primary' : 'gray-warning'" :size="34" bold width="372rpx" height="84rpx" shape="circle" @click="handleClick">
						{{ index == 0 ? '签到模板' : '加入会员' }}
					</tui-button>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			card: [
				{
					img: {
						url: '/static/images/my/mine_icon_welfare_3x.png',
						width: 60,
						height: 60,
						circle: true
					},
					title: {
						text: '点star送福利',
						color: '#586c94',
						size: 32
					},
					tag: {
						text: '所有用户',
						size: 26
					}
				},
				{
					img: {
						url: '/static/images/my/mine_icon_member_3x.png',
						width: 60,
						height: 60,
						circle: true
					},
					title: {
						text: '会员送福利',
						color: '#586c94',
						size: 32
					},
					tag: {
						text: '所有会员',
						size: 26
					}
				}
			],
			show: false,
			index: 0
		};
	},
	methods: {
		close() {
			this.show = false;
		},
		detail(index) {
			this.index = index;
			this.show = true;
		},
		handleClick() {
			this.close();
			let url = this.index == 0 ? '/pages/template/signIn/index/index' : '../member/member';
			this.tui.href(url);
		}
	},
	onShareAppMessage: function(e) {
		return {
			title: 'ThorUI福利'
		};
	}
};
</script>

<style>
.container {
	padding: 20rpx 0 80rpx;
}

.tui-welfare__img {
	width: 100%;
	min-height: 295rpx;
	height: auto;
	display: block;
}

.tui-common {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.tui-welfare__title {
	padding-top: 24rpx;
	padding-bottom: 12rpx;
	font-size: 34rpx;
}

.tui-welfare__desc {
	font-size: 28rpx;
	color: #888;
	padding-bottom: 30rpx;
}

.tui-mtop {
	margin-top: 40rpx;
}

.tui-desc__title {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
}
.thorui-article__h2 {
	padding-top: 30rpx;
}
.tui-tips {
	font-size: 26rpx;
	color: #999;
}
.tui-btn__box {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	padding: 50rpx 0;
}
</style>
